<template>
  <svg class="ee-svg-loading" viewBox="25 25 50 50">
    <circle cx="50" cy="50" r="20" fill="none" class="rotate"></circle>
  </svg>
</template>

<script type="text/javascript">

export default {
  name: "ee-svg-loading",
}
</script>

<style lang="scss">
.ee-svg-loading {
  stroke: currentColor;
  stroke-width: 4px;
  width: 1em;
  cursor: progress;
  vertical-align: middle;

  .rotate {
    animation: loading-dash 1.5s ease-in-out infinite;
    stroke-dasharray: 90, 150;
    stroke-dashoffset: 0;
    stroke-linecap: round;
  }

  @keyframes loading-dash {
    0% {
      stroke-dasharray: 1, 200;
      stroke-dashoffset: 0
    }

    50% {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -40px
    }

    to {
      stroke-dasharray: 90, 150;
      stroke-dashoffset: -120px
    }
  }
}
</style>